<template>
  <Card dis-hover :bordered="false">
    <Form inline>
      <Row>
        <Col span="19">
          <FormItem>
            <DatePicker
              v-model="params.date"
              type="daterange"
              :options="options"
              placeholder="创建日期选择"
              @on-change="searchData"
            />
          </FormItem>
          <FormItem>
            <Input
              v-width="120"
              placeholder="请输入关键词"
              v-model="params.keywords"
              @on-enter="searchData"
              @on-clear="searchData"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择平台"
              v-model="params.platform_name"
              @on-change="searchData"
              :filterable="platList.length >= 10"
              clearable
            >
              <Option
                v-for="item in platList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="账号类型"
              v-model="params.t_id"
              @on-change="searchData"
              :filterable="tList.length >= 10"
              clearable
            >
              <Option
                v-for="item in tList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="分类"
              v-model="params.c_id"
              @on-change="searchData"
              :filterable="cList.length >= 10"
              clearable
            >
              <Option
                v-for="item in cList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择创建人"
              v-model="params.created_member_id"
              @on-change="searchData"
              :filterable="userList.length >= 10"
              clearable
            >
              <Option
                v-for="item in userList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col span="5" style="text-align: right">
          <Button
            type="primary"
            @click="handleUpload"
            v-hasC="{
              name: 'v1-buss-target-content-upload-execl',
              flag: 'v1/buss/target-content/upload-execl',
            }"
            >文件导入</Button
          >
          <Button
            type="primary"
            @click="handleAdd"
            class="ivu-ml-8"
            v-hasC="{
              name: 'v1-buss-target-content-create',
              flag: 'v1/buss/target-content/create',
            }"
            >新增</Button
          >
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #title="{ row }">
        <a :href="row.url" target="_blank" v-if="row.url">
          <Ellipsis
            :text="row.title"
            :lines="1"
            :transfer="true"
            tooltip
            placement="top"
          />
        </a>
        <Ellipsis
          :text="row.title"
          :lines="1"
          v-else
          tooltip
          :transfer="true"
          placement="top"
        />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-buss-target-content-update',
            flag: 'v1/buss/target-content/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-target-content-update',
            flag: 'v1/buss/target-content/update',
          }"
        />
        <a
          @click="handleDel(row.id)"
          class="del"
          v-hasC="{
            name: 'v1-buss-target-content-delete',
            flag: 'v1/buss/target-content/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      :title="edit ? '新增' : '编辑'"
      :footer-hide="true"
      :draggable="true"
    >
      <Form ref="create" :model="topicInfo" :rules="rules" :label-width="80">
        <FormItem label="标题" prop="title" required>
          <Input
            v-model="topicInfo.title"
            placeholder="请输入标题"
            :maxlength="30"
          />
        </FormItem>
        <FormItem label="链接网址" prop="url">
          <Input
            type="textarea"
            v-model="topicInfo.url"
            placeholder="请输链接网址"
          />
        </FormItem>
        <FormItem label="归属账号" prop="account_name" required>
          <Input
            v-model="topicInfo.account_name"
            placeholder="请输入归属账号"
            :maxlength="30"
          />
        </FormItem>
        <FormItem label="账号类型" prop="t_id">
          <Select
            v-model="topicInfo.t_id"
            placeholder="请选择账号类型"
            :filterable="tAddList.length >= 10"
            clearable
          >
            <Option v-for="item in tAddList" :value="item.value">{{
              item.label
            }}</Option>
          </Select>
        </FormItem>

        <FormItem label="平台" prop="platform_name">
          <!-- <Select v-model="topicInfo.platform_name" placeholder="请选择平台" filterable allow-create @on-create="handleCreate2">
                    <Option v-for="item in platAddList" :value="item.value+''" :key="item.value" >{{item.label}}</Option>
                </Select> -->
          <dropdown
            :searchVal="topicInfo.platform_name"
            @changeVal="changeVal"
            :isNeedSearch="true"
            :placeholder="placeholder"
            :itemlist="platAddList"
          ></dropdown>
        </FormItem>
        <Row>
          <Col span="12">
            <FormItem label="点赞" prop="like_num">
              <InputNumber
                style="width: 100%"
                v-model="topicInfo.like_num"
                :min="0"
                placeholder="点赞"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="收藏" prop="comment_num">
              <InputNumber
                style="width: 100%"
                v-model="topicInfo.comment_num"
                :min="0"
                placeholder="收藏"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="评论" prop="collect_num">
              <InputNumber
                style="width: 100%"
                v-model="topicInfo.collect_num"
                :min="0"
                placeholder="评论"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="转发" prop="forward_num">
              <InputNumber
                style="width: 100%"
                v-model="topicInfo.forward_num"
                :min="0"
                placeholder="转发"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="分类" prop="c_id">
          <Select
            v-model="topicInfo.c_id"
            placeholder="请选择分类"
            :filterable="cAddList.length >= 10"
            clearable
          >
            <Option
              v-for="item in cAddList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="话题" prop="topic">
          <Input
            v-model="topicInfo.topic"
            placeholder="请输入话题"
            :maxlength="30"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button
          type="primary"
          @click="ok"
          :loading="btnLoading"
          style="margin-left: 10px"
          >保存</Button
        >
      </div>
    </Modal>

    <insert :showInsert="showInsert" @closeTopicModal="closeTopicModal" />
  </Card>
</template>
<script>
import insert from "./insert";
import Dropdown from "@/components/searchinput";
import dayjs from "dayjs";
import {
  targetContentList,
  topicCondition,
  targetContentCreate,
  targetContentDel,
  targetContentUpdate,
  targetContentInfo,
} from "@api/selecttopic.js";
export default {
  name: "selecttopic",
  components: { insert, Dropdown },
  data() {
    return {
      placeholder: "请输入平台名称",
      tableHeigth: document.body.clientHeight - 280,
      addModal: false,
      showInsert: false,
      edit: true,
      params: {
        date: [],
        keywords: "",
        platform_name: "",
        t_id: "",
        c_id: "",
        created_member_id: "",
        order_column: "",
        order_sort: "",
        current: 1,
        size: 10,
      },
      platList: [],
      tList: [],
      cList: [],
      userList: [],
      tAddList: [],
      platAddList: [],
      cAddList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          slot: "title",
          title: "标题",
          minWidth: 180,
        },
        {
          key: "account_name",
          title: "归属账号",
          width: 120,
        },
        {
          key: "t_name",
          title: "账号类型",
          width: 120,
        },
        {
          key: "platform_name",
          title: "平台",
          width: 120,
        },
        {
          key: "like_num",
          title: "点赞",
          width: 80,
          sortable: "custom",
        },
        {
          key: "collect_num",
          title: "收藏",
          width: 80,
          tooltip: true,
          sortable: "custom",
        },
        {
          key: "comment_num",
          title: "评论",
          width: 80,
          sortable: "custom",
        },
        {
          key: "forward_num",
          title: "转发",
          width: 80,
          sortable: "custom",
        },
        {
          key: "c_name",
          title: "内容分类",
          width: 100,
        },
        {
          key: "topic",
          title: "话题",
          ellipsis: "true",
          tooltip: "true",
          minWidth: 150,
        },
        {
          key: "created_member_name",
          title: "创建人",
          width: 100,
        },
        {
          key: "created_at_str",
          title: "创建日期",
          width: 110,
        },
        {
          key: "change_date",
          title: "更新日期",
          width: 110,
        },
        {
          slot: "action",
          title: "操作",
          width: 110,
          fixed: "right",
        },
      ],
      list: [],
      loading: false,
      btnLoading: false,
      topicInfo: {
        id: "",
        title: "",
        url: "",
        account_name: "",
        t_id: "",
        platform_name: "",
        like_num: null,
        comment_num: null,
        collect_num: null,
        forward_num: null,
        c_id: "",
        topic: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题" }],
        account_name: [{ required: true, message: "请输入归属账号" }],
      },
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  mounted() {
    this.getCondition();
    this.getData();
  },
  methods: {
    changeVal(e) {
      this.topicInfo.platform_name = e;
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    getCondition() {
      topicCondition().then((res) => {
        this.platList = res.platform;
        this.tList = res.type;
        this.cList = res.classify;
        this.userList = res.created_member;
      });
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          targetContentDel({ id: index }).then(() => {
            this.$Message.success("删除成功");
            this.getCondition();
            this.getData();
          });
        },
      });
    },
    handleAdd() {
      targetContentInfo().then((res) => {
        this.topicInfo = {
          id: "",
          title: "",
          url: "",
          account_name: "",
          t_id: "",
          platform_name: "",
          like_num: null,
          comment_num: null,
          collect_num: null,
          forward_num: null,
          c_id: "",
          topic: "",
        };
        this.tAddList = res.condition.type;
        this.platAddList = res.condition.platform;
        this.cAddList = res.condition.classify;
      });

      this.addModal = true;
      this.edit = true;
      this.$refs.create.resetFields();
    },
    handleEdit(info) {
      this.addModal = true;
      this.edit = false;
      targetContentInfo({ id: info.id }).then((res) => {
        this.topicInfo = {
          id: res.id,
          title: res.title,
          url: res.url,
          account_name: res.account_name,
          t_id: res.t_id,
          platform_name: res.platform_name,
          like_num: res.like_num ? +res.like_num : null,
          comment_num: res.comment_num ? +res.comment_num : null,
          collect_num: res.collect_num ? +res.collect_num : null,
          forward_num: res.forward_num ? +res.forward_num : null,
          c_id: res.c_id,
          topic: res.topic,
        };
        this.tAddList = res.condition.type;
        this.platAddList = res.condition.platform;
        this.cAddList = res.condition.classify;
      });
    },
    handleUpload() {
      this.showInsert = true;
    },
    closeTopicModal(state, type) {
      this.showInsert = state;
      if (type == "add") {
        this.getCondition();
        this.getData();
      }
    },
    getData() {
      this.loading = true;
      const params = {
        created_stime: this.params.date[0]
          ? dayjs(this.params.date[0]).format("YYYY-MM-DD")
          : "",
        created_etime: this.params.date[1]
          ? dayjs(this.params.date[1]).format("YYYY-MM-DD")
          : "",
        keywords: this.params.keywords,
        platform_name: this.params.platform_name,
        t_id: this.params.t_id,
        c_id: this.params.c_id,
        created_member_id: this.params.created_member_id,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        pageSize: this.params.size,
        page: this.params.current,
      };
      targetContentList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    handleCreate2(val) {
      this.platAddList.push({
        value: val,
        label: val,
      });
    },
    addTopic() {
      this.btnLoading = true;
      const params = {
        title: this.topicInfo.title,
        url: this.topicInfo.url,
        account_name: this.topicInfo.account_name,
        t_id: this.topicInfo.t_id,
        platform_name: this.topicInfo.platform_name,
        like_num: this.topicInfo.like_num,
        comment_num: this.topicInfo.comment_num,
        collect_num: this.topicInfo.collect_num,
        forward_num: this.topicInfo.forward_num,
        c_id: this.topicInfo.c_id,
        topic: this.topicInfo.topic,
      };
      if (this.edit) {
        targetContentCreate(params)
          .then((res) => {
            this.$Message.success("新增成功");
            this.btnLoading = false;
            this.addModal = false;
            this.getCondition();
            this.getData();
          })
          .catch(() => {
            this.btnLoading = false;
          });
      } else {
        targetContentUpdate(
          Object.assign({}, params, { id: this.topicInfo.id })
        )
          .then((res) => {
            this.$Message.success("编辑成功");
            this.btnLoading = false;
            this.addModal = false;
            this.getCondition();
            this.getData();
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.addTopic();
        } else {
          this.addModal = true;
          return;
        }
      });
    },
  },
};
</script>
